<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>在线收入汇总数据看板</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/client.css" rel="stylesheet" type="text/css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />



<link rel="stylesheet" href="/css/theme/font-awesome.min.css" type="text/css" />		
<link rel="stylesheet" href="/css/theme/bootstrap.min.css" type="text/css" />	
<link rel="stylesheet" href="/javascript/theme/libs/css/ui-lightness/jquery-ui-1.9.2.custom.css" type="text/css" />	
<link rel="stylesheet" href="/css/theme/App.css" type="text/css" />
<link rel="stylesheet" href="/css/theme/custom.css" type="text/css" />
<script src="/javascript/theme/libs/jquery-1.9.1.min.js"></script>
<script src="/javascript/theme/libs/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/javascript/theme/libs/bootstrap.min.js"></script>
<script src="/javascript/theme/plugins/icheck/jquery.icheck.min.js"></script>
<script src="/javascript/theme/plugins/select2/select2.js"></script>
<script src="/javascript/theme/plugins/tableCheckable/jquery.tableCheckable.js"></script>
<script src="/javascript/theme/App.js"></script>
<script src="/javascript/theme/libs/raphael-2.1.2.min.js"></script>
<script src="/javascript/theme/plugins/morris/morris.min.js"></script>
<script src="/javascript/theme/demos/charts/morris/area.js"></script>
<script src="/javascript/theme/demos/charts/morris/donut.js"></script>
<script type="text/javascript" src="/javascript/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/javascript/template.js?2"></script>
<script type="text/javascript" src="/javascript/report/FusionCharts.js"></script>

</head>
<body>
	<div id="content">		

		<div id="content-container">
			
			</BR>
			<form id="orsboard" name ="orsboard" action="/ors/orsboard" method="post">
    			<!-- 表头信息  -->
    			<div>
    				<h4 class="heading-inline">在线收入汇总看板
    				&nbsp;&nbsp;
    				<small> (注:以下收入皆为现金,不含优惠。)</small>
    				&nbsp;&nbsp;
    				</h4>
    				
    				<div class="btn-group ">
    				  <label class="col-md-2">日期</label>
    				  <div class="col-md-2">
    					<input  type="text" id="searchDate" name="searchDate" style="width:150px" class="Wdate form-control" value="$!{searchDate}" onclick="WdatePicker({skin:'ext',dateFmt:'yyyy-MM-dd'})"/>
    				  </div>
    				  <div class="col-md-2">
    					<button type="submit"  name="tosearch" id="tosearch"  class="btn btn-primary btn-xs">查  询</button>
					  </div>
					  
					  <label style="color:red" class="col-md-2">(当前最新汇总数据日期为$!{theNewestDate})</label>
    				</div>
    			</div>
    			<!-- 表头信息  -->
			 </form>
			<br/>

			<!-- 汇总数据  -->
			<div class="row">

				
				<div class="col-md-3 col-sm-6">

					<a  class="dashboard-stat primary">
						<div class="visual">
							<i class="fa fa-star"></i>
						</div> <!-- /.visual -->

						<div class="details">
							<span class="content">在线总收入</span>
							<span class="value">$tools.qfw2($!{oneDayVo.onlineRevenueAll})</span>
						</div> <!-- /.details -->

						<i class="fa fa-play-circle more"></i>

					</a> <!-- /.dashboard-stat -->

				</div> <!-- /.col-md-3 -->
				

				<div class="col-md-3 col-sm-6">

					<a class="dashboard-stat tertiary">
						<div class="visual">
							<i class="fa fa-money"></i>
						</div> <!-- /.visual -->

						<div class="details">
							<span class="content">联盟收入</span>
							<span class="value">$tools.qfw2($!{oneDayVo.googleAndBaiduIncome})</span>
						</div> <!-- /.details -->

						<i class="fa fa-play-circle more"></i>

					</a> <!-- /.dashboard-stat -->

				</div> <!-- /.col-md-9 -->
				
				<div class="col-md-3 col-sm-6">

					<a class="dashboard-stat secondary">
						<div class="visual">
							<i class="fa fa-money"></i>
						</div> <!-- /.visual -->

						<div class="details">
							<span class="content">精准收入(含CPC)</span>
							#set($preall = $!{oneDayVo.preClickAmortize} + $!{oneDayVo.preAmortize})
							<span class="value">$tools.qfw2($!{preall})</span>
						</div> <!-- /.details -->

						<i class="fa fa-play-circle more"></i>

					</a> <!-- /.dashboard-stat -->

				</div> <!-- /.col-md-9 -->
				
				<div class="col-md-3 col-sm-6">

					<a class="dashboard-stat prec" >
						<div class="visual">
							<i class="fa fa-money"></i>
						</div> <!-- /.visual -->

						<div class="details">
							<span class="content">置顶收入</span>
							<span class="value">$tools.qfw2($!{oneDayVo.topAmortize})</span>
						</div> <!-- /.details -->

						<i class="fa fa-play-circle more"></i>

					</a> <!-- /.dashboard-stat -->

				</div> <!-- /.col-md-9 -->

				<div class="col-md-3 col-sm-6">

					<a class="dashboard-stat int" >
						<div class="visual">
							<i class="fa fa-money"></i>
						</div> <!-- /.visual -->

						<div class="details">
							<span class="content">智能收入</span>
							<span class="value">$tools.qfw2($!{oneDayVo.intAmortize})</span>
						</div> <!-- /.details -->

						<i class="fa fa-play-circle more"></i>

					</a> <!-- /.dashboard-stat -->

				</div> <!-- /.col-md-9 -->
				
				
			</div> <!-- /.row -->




			<div class="row">
				
				<!-- 左侧全部图表  -->
				
				<div class="col-md-9">

					<!-- 左侧曲线图  -->
					<div class="portlet">

						<div class="portlet-header">

							<h3>
								<i class="fa fa-bar-chart-o"></i>
								图表
							</h3>

						</div> <!-- /.portlet-header -->

						<div class="portlet-content">


							<div class="clear"></div>
							<hr />


							<div id="area-chart" class="chart-holder" style="height: 250px"></div> <!-- /#bar-chart -->

							<script >
    							$(function () {
                                	if (!$('#area-chart').length) { return false; }
                                	
                                	area ();	
                                
                                	$(window).resize (App.debounce (area, 250));
                                
                                });
                                
                                function area () {
                                	$('#area-chart').empty ();
									
									var lineJson = jQuery.parseJSON('$!{lineJson}');
									
                                	Morris.Area ({
                                		element: 'area-chart',
                                		data:lineJson,
                                		xkey: 'period',
                                		ykeys: ['联盟收入', '精准收入','置顶收入','智能收入'],
                                		labels: ['联盟收入', '精准收入','置顶收入','智能收入'],
                                		pointSize: 4,
                                		hideHover: 'auto',
                                		lineColors: [App.chartColors[0], App.chartColors[1], App.chartColors[2],App.chartColors[3]]
                                	});
                                }
                            </script>
						</div> <!-- /.portlet-content -->

					</div> <!-- /.portlet -->
					<!-- 左侧曲线图  -->


    				<!-- 品类表格数据  -->
    				<div class="row">
						
    					<!-- 联盟品类数据 -->
    					<div class="col-md-6" style="width:98.8%">
    
    						<div class="portlet">
    
    							<div class="portlet-header">
    
    								<h3>
    									<i class="fa fa-money"></i>
    									联盟类别收入数据($!{searchDate})
    								</h3>
    
    
    							</div> <!-- /.portlet-header -->
    
    							<div class="portlet-content">
    
    								<div class="table-responsive">
    								<table class="table">
    									<thead>
    										<tr>
    											<th>类别</th>
    											<th>今日收入</th>
    											<th>同比</th>
    											<th>环比</th>
    										</tr>
    									</thead>
    									<tbody>
											
											#foreach($rs in $allianceIncomeList)
                                        		#set($values = $rs.split(';'))	
                                        		<tr>
                                        			<td>$values[0]</td>
                                        			<td>$values[1]</td>
                                        			<td>$values[3]%</font></td>
                                        			<td>$values[5]%</font></td>
                                          		</tr>
                                        	#end
    									</tbody>
    								</table>
    							</div> <!-- /.table-responsive -->
    
    
    							</div> <!-- /.portlet-content -->
    
    						</div> <!-- /.portlet -->
    
    
    					</div> <!-- /.col-md-4 -->
    					<!-- 联盟品类数据 -->
    
				</br>
					#if(${cateIncomeList})
						<!-- 精准/置顶/智能 - 类别收入数据 -->
    					<div class="col-md-6" style="width:98.8%">
   
    						<div class="portlet">
    
    							<div class="portlet-header">
    
    								<h3>
    									<i class="fa fa-money"></i>
    									精准/置顶/智能 - 类别收入数据($!{searchDate})
										</SPAN>
    								</h3>
    
    
    							</div> <!-- /.portlet-header -->
    
    							<div class="portlet-content">
    
    								<div class="table-responsive">
    								<table class="table">
    									<thead>
    										<tr>
    											<th>类别</th>
    											<th>精准</th>
    											<th>同比</th>
    											<th>环比</th>
												
												<th>置顶</th>
    											<th>同比</th>
    											<th>环比</th>
												
												<th>智能</th>
    											<th>同比</th>
    											<th>环比</th>
    										</tr>
    									</thead>
    									<tbody>
											#foreach($rs in $cateIncomeList)
                                            <tr>
                            				   #set($list = $rs.split(";"))
                            				   #foreach($value in $list)
												<td class="td1">
													$value
												</td>
                            				   #end
                                            </tr>
                            				#end
    									</tbody>
    								</table>
    							</div> <!-- /.table-responsive -->
    
    
    							</div> <!-- /.portlet-content -->
    
    						</div> <!-- /.portlet -->
    
    
    					</div> <!-- /.col-md-4 -->
    					<!-- 订单  -->
					#end
					
    				</div> <!-- /.row -->
    				<!-- 品类表格数据  -->



				</div> <!-- /.col-md-9 -->
				
				<!-- 左侧全部图表  -->



				<!-- 右侧图形  -->
				<div class="col-md-3">
					
					<!-- KPI饼图  -->
					<div class="portlet">

						<div class="portlet-header">

							<h3>
								<i class="fa fa-bar-chart-o"></i>
								收入比例
							</h3>

						</div> <!-- /.portlet-header -->

						<div class="portlet-content">

							<div id="donut-chart" class="chart-holder" style="height: 250px"></div>
							<script >
                                $(function () {
                                	
                                    if (!$('#donut-chart').length) { return false; }
                                
                                	donut ();
                                
                                	$(window).resize (App.debounce (donut, 325));
                                
                                });
                                
                                function donut () {
                                	$('#donut-chart').empty ();
									var pieJson = jQuery.parseJSON('$!{pieJson}');
                                	Morris.Donut({
                                        element: 'donut-chart',
                                        data: pieJson,
                                        colors: App.chartColors,
                                        hideHover: true,
                                        formatter: function (y) { return y + "%" }
                                    });
                                }
                            </script>
							 
						</div> <!-- /.portlet-content -->

					</div> <!-- /.portlet -->
					<!-- KPI饼图  -->

					<!-- 流量进度图  -->
					<div class="portlet">

						<div class="portlet-header">

							<h3>
								<i class="fa fa-compass"></i>
								本月KPI进度
							</h3>

						</div> <!-- /.portlet-header -->

						<div class="portlet-content">

							
						#foreach($kpi in $kpiList)
							#set($name = $kpi.split(':')[0])
							#set($pro = $kpi.split(':')[1])
							<div class="progress-stat">
								
								<div class="stat-header">
									
									<div class="stat-label">
										$!{name}
									</div> <!-- /.stat-label -->
									
									<div class="stat-value">
										$!{pro}%
									</div> <!-- /.stat-value -->
									
								</div> <!-- /stat-header -->
								
								<div class="progress progress-striped active">
								  <div 
									class="progress-bar 
									#if($velocityCount == 1)
										progress-bar-tertiary
									#elseif($velocityCount == 2)
										progress-bar-secondary
									#elseif($velocityCount == 3)
										progress-bar-prec	
									#else
										progress-bar-int
									#end
									" 
									role="progressbar" aria-valuenow="77" aria-valuemin="0" aria-valuemax="100" style="width:$!{pro}%">
								    <span class="sr-only">$!{pro}%</span>
								  </div>
								</div> <!-- /.progress -->
								
							</div> <!-- /.progress-stat -->

						#end



						</div> <!-- /.portlet-content -->

					</div> <!-- /.portlet -->
					<!-- 流量进度图  -->


				</div> <!-- /.col -->
				<!-- 右侧图形  -->
				
				
			</div> <!-- /.row -->

		</div> <!-- /#content-container -->
		

	</div> <!-- #content -->	
	


</body>
</html>